// 获取全部图片 
var img = document.querySelectorAll(".slider_img");
// 获取左箭头
var btn_prev = document.querySelector('.slider_prev');
// 获取右箭头
var btn_next = document.querySelector('.slider_next');
// 获取原点
var circle = document.querySelectorAll('.circle');
// 设置索引
var index = 0;
// 设置定时器时间
var settime = 2000

// 设置初始定时器
var intervalslider = setInterval("slider()", settime);
// 添加轮播图方法
function slider() {
    index++
    if(index>2){
        index=0
    }
    change()
}
function change() {
    // 遍历每一张图片
    for (let i = 0; i < img.length; i++) {
        // 给图片和原点设置初始状态
        img[i].style.opacity = 0;
        circle[i].className = 'circle'
    }

    img[index].style.opacity = 1;
    circle[index].className = 'circle active'
}
// 右按钮
btn_next.addEventListener('click', () => {
    index++
    // 当图片轮播到最后一张的时候回到第一张
    if (index > 2) { index = 0 }

    change()
    clearInterval(intervalslider);
    intervalslider = setInterval('slider()', settime)
})
// 左按钮
btn_prev.addEventListener('click', () => {
    index--
    if (index < 0) { index = 2 }
    change()
    clearInterval(intervalslider);
    intervalslider = setInterval('slider()', settime)
})

// 按钮点击事件
var clidnex = 0
circle.forEach(cl => {
    cl.clindex = clidnex
    clidnex++
    cl.addEventListener('click', () => {
        index=cl.clindex
        change()
        clearInterval(intervalslider);
        intervalslider = setInterval('slider()', 2000)
    })
})